<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading">
    <el-row :gutter="30">

      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.projectId' prop='projectId'>
          {{ isNullOrEmpty( operate.projectName ) }}
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.buildingName' prop='buildingName'>
          <el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.buildingName' clearable :placeholder='prompt?.buildingName' />
        </el-form-item>
      </re-col>

      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.upFloors' prop='upFloors'>
          <el-input v-model.trim='formInline.upFloors' clearable :placeholder='prompt?.upFloors' />
        </el-form-item>
      </re-col>
      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.downFloors' prop='downFloors'>
          <el-input v-model.trim='formInline.downFloors' clearable :placeholder='prompt?.downFloors' />
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.drawingPoint'>
          <el-button type="primary" @click="edit">地图标记</el-button>
          <el-button type="primary" @click='openDrawingPoints'>图纸标记</el-button>
          <!-- <el-input v-model.trim='formInline.drawingPoints' clearable :placeholder='prompt?.drawingPoints' /> -->
        </el-form-item>
      </re-col>
      <!-- <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.mapPoints' prop='mapPoints'>
          <el-input v-model.trim='formInline.mapPoints' clearable :placeholder='prompt?.mapPoints' />
        </el-form-item>
      </re-col> -->
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.remark' prop='remark'>
          <el-input :maxlength="100" :show-word-limit="true" type="textarea" autosize v-model='formInline.remark' clearable :placeholder='prompt?.remark' />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { addDialog } from "@/components/ReDialog";
import SjMap from "@/components/mapForm/map.vue"
import { ref, reactive, h } from "vue";
import ReCol from "@/components/ReCol";
import drawingPoints from './drawingPoints.vue'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';

import type { infoType } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import {deviceDetection, debounce, isArray} from "@pureadmin/utils";
import { usePageVariablesStoreHook, UNIT_TYPE_VIEW_Map } from '@/store/modules/pageVariables'
import { INTEGER_REG,INTEGER_REG_ZERO } from '@/constant/index'
import {usePoints} from "@/common/points";
import { getInfo as buiuldingGetINFO  } from "@/api/operate/project-management/projectManagement/setting";
const operate = usePageVariablesStoreHook().getOperate()

type FormProps = {
  formInline: infoType,
  originMarker: Array|Object,
  isLoading: boolean,
  isEdit: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({} as infoType),
  originMarker: () => {},
  isLoading: false,
  isEdit: false,
});

const formRules = reactive(<FormRules>{
  buildingName: [{ required: true, message: prompt?.buildingName, trigger: 'blur' },],
  upFloors: [{
    required: true, message: prompt?.upFloors, trigger: 'blur' },
    { pattern: INTEGER_REG.role, message: INTEGER_REG.text, trigger: 'blur' },

  ],
  downFloors: [{ required: true, message: prompt?.downFloors, trigger: 'blur' },
  { pattern: INTEGER_REG_ZERO.role, message: INTEGER_REG_ZERO.text, trigger: 'blur' },
  ],
});
const ruleFormRef = ref();
const drawingPointsRefs = ref()
const showInfo = ref();
const formRef = ref();
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
  center: [],
  drawingPoint:{}
  // area:[]
})


onMounted(() => {
  
  getBuildingPlan()

});
//打开地图组件
// 编辑
const edit = () => {
  showInfo.value = {}
  openDialog()
}

const openDialog = () => {
  formState.center = [props.formInline.markPoint.lng, props.formInline.markPoint.lat]
  
  console.log("地图中心点",formState.center);
  
  addDialog({
    title: '地图标记',
    width: "800px",
    draggable: true,
    props: {
      center: formState.center,
      showCreatePoly: false,
      isEdit:true,
      labelMarkers: []
    },
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    open:( {options,index}) => {
      //获取已经标记过的点位
      usePoints("building").getMapPoints(operate.checkedProject, true, formState.center).then(res => {
        formRef.value.setLabelMarkers(res)
      })
    },
    contentRenderer: () => h(SjMap, {
      ref: formRef,
      "onUpdate:center": (val) => {
        formState.center = val
      },
    }),
    beforeSure: (done, { options }) => {
      function chores() {
        props.formInline.markPoint.lng = formState.center[0]
        props.formInline.markPoint.lat = formState.center[1]
        done(); // 关闭弹框
      }
      chores()
    }
  })
}
//获取项目平面图
const bgimg = ref()
const getBuildingPlan = ()=>{
  if ( operate.checkedProject == null) {
    return
  }else{
    buiuldingGetINFO().then(res => {
		if (res.code == 200) {
bgimg.value = res.result.projectPlan
			// console.log("获取信息", res);

		}
	}).finally(() => {

	})
  }

}
const openDrawingPoints = () => {  //图纸标点
  console.log("openDrawingPoints", props.formInline.drawingPoint);
  
  let changeMarker = []
  const dp = props.formInline.drawingPoint
  console.log("dp", Object.keys(dp).length);
  if(Object.keys(dp).length > 2 && dp.lat !== '' && dp.lng !== '') {
    changeMarker = [dp]
  }
  console.log("changeMarker", changeMarker);
  
  addDialog({
    title: `图纸标点`,
    width: "1100px",
    draggable: true,
    props: {
      isShowPopup: false,
      changeMarker: changeMarker, //添加，修改的标点
      markerArr: [], //已经添加过的标点
       bgImg: bgimg.value
    },
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,

    open:( {options,index}) => {
      console.log("props.originMarker:", props.originMarker);
      
      //获取已经标记过的点位
      usePoints("building").getMarkerPoints(true, props.originMarker).then(res=>{
        drawingPointsRefs.value.setFixedMarkers(res)
      })
    },
    contentRenderer: () => h(drawingPoints, {
      ref: drawingPointsRefs,
      "onUpdate:changeMarker": (val) => {
        console.log("val", val);
        if(isArray(val) && val.length > 0) {
          formState.drawingPoint = val[0]
        }
      }
    }),

    beforeSure(done, {options, index}) {
      props.formInline.drawingPoint = formState.drawingPoint
      console.log("点击确认",  props.formInline.drawingPoint);
      
      done();// 关闭弹框

    },
  });
}

function getRef() {
  return ruleFormRef.value;
}


defineExpose({ getRef });
</script>
